<template>
    <div>
        <div>
            <nav-bar>
                <template v-slot:default>购物车(<span>{{$store.state.acountCart}}</span>)</template>
            </nav-bar>
            <div class="content">
                <div class="nullcart" v-if="list.length<1">
                    <img src="~assets/images\nullcarty.gif" alt="">
                    <div>
                        <div style="font-size: 25px; padding: 15px " >购物空空如也</div>
                        <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" size="normal" @click="GotoHome">
                            立即去购物
                        </van-button>
                    </div>
                </div>
                <van-checkbox-group v-model="result" @change="groupChange">
                    <van-swipe-cell v-for="(item,index) in list"  :key="index">
                        <div class="cart-info">
                            <div class="vancheckbox">
                                <van-checkbox :name="item.id"/>
                            </div>
                            <div class="cartimg"><img v-lazy="item.goods.cover_url" alt="" ></div>
                            <div class="cart-title">
                                <div style="margin-top: 25px; color: #888888; ">
                                    <div style="float: left">{{item.goods.title.substring(0,12)}}</div>
                                    <div style="float: right;margin-right: 10px">x{{item.goods.stock}}</div>
                                </div>
                                <div style="margin-top: 65px">
                                    <span style="float: left;color:red">￥ {{item.goods.price}}</span>
                                    <span style="float: right;margin-right: 15px">
                                        <van-stepper :min="1" :max="99" v-model="item.num"
                                                     theme="round" button-size="22"      async-change
                                        @change="onchange"  :name="item.id"
                                        />
                                    </span>
                                </div>
                            </div>
                        </div>
<!--                        佐拉删除-->
                        <template #right>
                            <van-button square type="danger" text="删除" class="delete-button"
                            @click="deletcartitem(item.id)"
                            />
                        </template>
                    </van-swipe-cell>
                </van-checkbox-group>
            </div>
            <div>
                <van-submit-bar :price="total * 100" button-text="提交订单" @submit="onSubmit">
                    <van-checkbox @click="allCheck" v-model:checked="checkAll">全选</van-checkbox>
                    <template #tip>
                        你的收货地址不支持同城送, <span @click="onClickEditAddress">修改地址</span>
                    </template>
                </van-submit-bar>
            </div>
        </div>
    </div>
</template>

<script>
    import {useStore} from 'vuex';
    import {Toast} from 'vant'
    import {useRoute,useRouter} from 'vue-router'
    import {checkedCard, deleteCartItem, getCart, modifyCart} from "../../network/cart";
    import {reactive,onMounted,toRefs,computed} from 'vue'
    import NavBar from "../../components/common/navbar/NavBar";
    export default {
        name: "ShopCart",
        components:{
            NavBar
        },
        data(){
            return{
                allchecked:[],
                num:1,
            }
        },

        setup(){
            const store = useStore();
            const router =useRouter();
            const onSubmit = ()=>{

                if (state.result.length == 0){
                    Toast('请选择商品进行结算')
                    return
                }else{
                    router.push({path:'/Createorder'})
                }
        };
            //购物车为空，去首页购物
            const GotoHome =()=>{
                router.push({path:'/Home'})
            }
            //数据模型，状态
            const state=reactive({
                list:[],//列表的数据
                result:[],  //id数组，选中数组列表
                checkAll:true
            })
            // 初始化购物车数据
            const init =()=>{
                Toast.loading('购物车加载中');
                getCart('include=goods').then(res=>{
                    state.list=res.data;
                    state.result=res.data.filter(n=>n.is_checked==1).map(item=>item.id);

                    Toast.clear()
                })
            }
            //挂载函数
           onMounted(()=>{
               init();
            })
            //修改过购物车数量
            const onchange =(value,detail)=>{
                Toast.loading({message:'修改中...',forbidClick:true})
                modifyCart(detail.name,{num:value}).then(res=>{
                    //数据库状态改变了，但是list没有改变
                    state.list.forEach(item=>{
                        if (item.id==detail.name){
                            item.num=value
                        }
                    })
                    Toast.clear();
                })
            }
            //购物车复选框组状态
            const groupChange=(result)=>{
                if (result.length==state.list.length){
                    state.checkAll=true;
                }else{
                    state.checkAll=false
                }
                state.result=result;
                //改变服务器数据库选中状态
                checkedCard({cart_ids:result})
            }
            //全选框按钮
            const allCheck=()=>{
                if (!state.checkAll){
                    state.result=state.list.map(item=>item.id);
                    state.checkAll=true
                }else{
                    state.result=[];
                    state.checkAll=false
                }
            }//删除购物车选项
            const deletcartitem = (id)=>{
                deleteCartItem(id).then(res=>{
                    init();
                    store.dispatch('updateCart')
                })
            }
            //通过计算属性，计算总价
            const total =computed(()=>{
                let sum =0;
                state.list.filter(item=>state.result.includes(item.id))
                    .forEach(item=>{
                        sum+=parseInt(item.num)*parseFloat(item.goods.price);
                    })
                return sum;
            })
           return{
                ...toRefs(state),
               onSubmit,
               GotoHome,
               onchange,
               groupChange,
               allCheck,
               deletcartitem,
               total
           }
        }
    }
</script>

<style scoped lang="scss">
.content{
    margin-top: 45px;
    width: 100%;
    overflow: hidden;
    max-width: 100%;
    img{
        width: 95px;
        height: 95px;
        margin-top: 10px;
    }
}
    .delete-button{
        height: 100%;
    }
    .cart-info{
        display: flex;
    }

    .vancheckbox{
        flex: 1;
        .van-checkbox{
            margin-top: 40px;
            margin-left: 25px;
        }
    }
    .cartimg{
        flex: 3;
    }
    .cart-title{
        flex: 5;
        font-size: 14px;

    }
    .van-submit-bar{
        margin-bottom: 50px;
    }
    .nullcart{
        margin-top: 100px;
        width: 100%;
        height: auto;
        img{
            height: auto;
            width: 50%;
        }
    }
</style>